<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { onActivated, ref, onMounted } from "vue";
import ReChart from "@/components/ReChart/index.vue";
import {
  barChartData,
  lineChartData,
  pieChartData,
  radarChartData,
  gaugeChartData
} from "@/components/ReChart/samples";

defineOptions({
  name: "Welcome"
});

const { t } = useI18n();

// 在被keep-alive缓存的组件激活时调用
onActivated(() => {
  console.log("Welcome组件被激活");
});

// 当前选中的图表类型
const activeChart = ref("line");

// 切换图表类型
const changeChartType = (type: string) => {
  activeChart.value = type;
};
</script>

<template>
  <!-- 使用卡片容器确保样式一致性 -->
  <div class="mb-2">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">{{ t("welcome.pureAdminThin") }}</span>
          <el-radio-group
            v-model="activeChart"
            size="small"
            @change="changeChartType"
          >
            <el-radio-button value="line">折线图</el-radio-button>
            <el-radio-button value="bar">柱状图</el-radio-button>
            <el-radio-button value="pie">饼图</el-radio-button>
            <el-radio-button value="radar">雷达图</el-radio-button>
            <el-radio-button value="gauge">仪表盘</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <div class="content">
        <!-- 数据指标卡片 -->
        <div class="info-container">
          <el-row :gutter="16">
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <div class="data-card bg-blue">
                <div class="data-icon">
                  <el-icon><i-ep-data-analysis /></el-icon>
                </div>
                <div class="data-info">
                  <span class="data-label">总访问量</span>
                  <span class="data-value">87,629</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <div class="data-card bg-green">
                <div class="data-icon">
                  <el-icon><i-ep-shopping-cart /></el-icon>
                </div>
                <div class="data-info">
                  <span class="data-label">订单数量</span>
                  <span class="data-value">21,458</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <div class="data-card bg-orange">
                <div class="data-icon">
                  <el-icon><i-ep-user /></el-icon>
                </div>
                <div class="data-info">
                  <span class="data-label">用户总数</span>
                  <span class="data-value">14,782</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <div class="data-card bg-red">
                <div class="data-icon">
                  <el-icon><i-ep-money /></el-icon>
                </div>
                <div class="data-info">
                  <span class="data-label">总收入</span>
                  <span class="data-value">¥ 4,389,562</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 图表区域 -->
        <div class="chart-section">
          <div v-if="activeChart === 'line'" class="chart-container">
            <h3>月度数据趋势分析</h3>
            <ReChart
              type="line"
              :data="lineChartData"
              height="380px"
              title=""
            />
          </div>

          <div v-if="activeChart === 'bar'" class="chart-container">
            <h3>周销售数据统计</h3>
            <ReChart type="bar" :data="barChartData" height="380px" title="" />
          </div>

          <div v-if="activeChart === 'pie'" class="chart-container">
            <h3>产品销量占比</h3>
            <ReChart type="pie" :data="pieChartData" height="380px" title="" />
          </div>

          <div v-if="activeChart === 'radar'" class="chart-container">
            <h3>部门预算分析</h3>
            <ReChart
              type="radar"
              :data="radarChartData"
              height="380px"
              title=""
            />
          </div>

          <div v-if="activeChart === 'gauge'" class="chart-container">
            <h3>任务完成情况</h3>
            <ReChart
              type="gauge"
              :data="gaugeChartData"
              height="380px"
              title=""
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.box-card {
  width: 100%;
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 18px;
  font-weight: 600;
}

.content {
  padding: 10px 0;
}

.info-container {
  margin-bottom: 20px;
}

.data-card {
  position: relative;
  display: flex;
  align-items: center;
  height: 90px;
  padding: 15px;
  margin-bottom: 15px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
  transition: all 0.3s;
}

.data-card:hover {
  box-shadow: 0 6px 15px rgb(0 0 0 / 10%);
  transform: translateY(-3px);
}

.data-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  content: "";
  border-radius: 3px 0 0 3px;
}

.bg-blue::before {
  background-color: #409eff;
}

.bg-green::before {
  background-color: #67c23a;
}

.bg-orange::before {
  background-color: #e6a23c;
}

.bg-red::before {
  background-color: #f56c6c;
}

.data-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  margin-right: 15px;
  font-size: 22px;
  border-radius: 8px;
}

.bg-blue .data-icon {
  color: #409eff;
  background-color: rgb(64 158 255 / 10%);
}

.bg-green .data-icon {
  color: #67c23a;
  background-color: rgb(103 194 58 / 10%);
}

.bg-orange .data-icon {
  color: #e6a23c;
  background-color: rgb(230 162 60 / 10%);
}

.bg-red .data-icon {
  color: #f56c6c;
  background-color: rgb(245 108 108 / 10%);
}

.data-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.data-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #909399;
}

.data-value {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: #303133;
  white-space: nowrap;
}

.chart-section {
  overflow: hidden;
  border-radius: 4px;
}

.chart-container {
  position: relative;
  margin-bottom: 15px;
}

h3 {
  padding-left: 10px;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  border-left: 3px solid #409eff;
}
</style>
